<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>空域综合态势</title>
		<link href="css/a.css" rel="stylesheet" type="text/css">

	</head>

	<body>
		<!-- 航线运行分析报告（飞行热点图） -->
		<!-- <div id="load"><loading v-show="showLoading"></loading></div> -->
		<div id="app" v-cloak>
			<el-container>
				<el-header>
					<div class="header-left">
						<div class="map_logo">
							<img src="images/logo.png" alt="">
							<span>空域综合态势</span>
						</div>
						<div class="map_nav">
							<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#0a5083" text-color="#fff" active-text-color="#fff">
								
								<el-menu-item index="1">态势管理</el-menu-item>
								<el-menu-item index="2">计划进程</el-menu-item>
								<el-menu-item index="3">综合告警</el-menu-item>
								<el-menu-item index="4">情报分发</el-menu-item>
								<el-menu-item index="5">应急救援</el-menu-item>
								<el-menu-item index="6"><a target="_blank" href="flyReport.html">飞行简报</a></el-menu-item>
								<el-menu-item index="7">书签</el-menu-item>
								<el-menu-item index="8"><a target="_blank" href="index2.html">回放</a></el-menu-item>
								<el-menu-item index="9">统计</el-menu-item>
								<el-menu-item index="10">设置</el-menu-item>
							</el-menu>
							<div :class="settingData.showSettingbox?'navfloatbox-setting navfloatbox show':'navfloatbox-setting navfloatbox'">
								<div class="tit">
									<h2>设置</h2>
								</div>
								<div class="setting-main">
									<el-tabs v-model="settingData.activeNavtab" type="card" @tab-click="handleClick">
										<el-tab-pane label="数据源切换" name="first">
											<div class="setting-bd">
												<div class="sourcelist">
													<span>ADS-B</span>
													<el-switch v-model="settingData.settingval1" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>北斗</span>
													<el-switch v-model="settingData.settingval2" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>3/4G</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>一二次雷达</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>无人机侦测</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>无人机数据中心</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>无人机遥测</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
												<div class="sourcelist">
													<span>融合</span>
													<el-switch active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
												</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="基础设置" name="second">
											<div class="setting-bd">
												<div class="baseinfo">
													<div class="infolist">
														<span>标牌</span>
														<el-switch v-model="settingData.settingval1" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
													</div>
													<div class="infolist">
														<span>尾迹</span>
														<el-switch v-model="settingData.wakeOpacity" @change="setWake" active-color="#062e4d" inactive-color="#0d0e11"></el-switch>
													</div>
													<div class="infolist">
														<span>尾迹点选择</span>
														<el-select v-model="settingData.value" placeholder="请选择">
															<el-option v-for="item in settingData.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</div>
													<div class="infolist">
														<span>速度过滤</span>
														<el-slider v-model="settingData.baseinfoval1" range :max="10"></el-slider>
													</div>
													<div class="infolist">
														<span>高度过滤</span>
														<el-slider v-model="settingData.baseinfoval2" range :max="10"></el-slider>
													</div>
													<div class="infolist">
														<span>地图风格</span>
														<el-select v-model="settingData.mapvalue" placeholder="请选择">
															<el-option v-for="item in settingData.mapoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
														</el-select>
													</div>
													<div class="infolist">
														<span>地图亮度</span>
														<el-slider v-model="settingData.baseinfoval3"></el-slider>
													</div>
													<div class="infolist">
														<span>单位切换</span>
														<el-radio-group v-model="settingData.unit" @change="setUnit">
															<el-radio label="1">英制</el-radio>
															<el-radio label="2">公制</el-radio>
														</el-radio-group>
													</div>
												</div>
											</div>
										</el-tab-pane>
										<el-tab-pane label="告警设置" name="third"></el-tab-pane>
									</el-tabs>
								</div>
							</div>
							<div v-show="settingData.showSettingHotbox" class="Hotbg">
									
								<div class="setting-Hot">
									<span><a target="_blank" href="./routesHot.html">航线热点</a></span>
									<!-- <span><a target="_blank" href="./airspaceHot.html">空域热点</a></span> -->
								</div>
							</div>
						</div>
					</div>
	
					<div class="header-right">
						<div class="userInfo">
							<div class="avatar-name">
								<!-- <span class="date">2018.9.11</span> -->
								<span class="date">{{nowTime}}</span>
								
								<span>{{userInfo.userRightInfo.userName}}</span>
								<a target="_blank" href="http://212.64.57.59:10009/kyjs/#/user" title="后台" class="icon iconfont icon-houtai" @click="goset"></a>
								<a target="_blank" href="http://212.64.57.59:10009/kyjs/bigmap/" title="大屏" class="icon iconfont icon-guanlixitong"></a>
								<a href="http://212.64.57.59:10009/kyjs/" title="退出" class="icon iconfont icon-guanbi" @click="closeMap"></a>
							</div>
						</div>
						<div class="nav_btn">
	
						</div>
					</div>
	
				</el-header>
				<el-main>
					<div id="map">

					</div>
				</el-main>
			</el-container>
			<!-- 右侧按钮 -->
			<div class="routes_right">
				<div v-show="right_one" class="routes_open" @click="openRight">
					<p></p>
					
				</div>
				<div v-show="right_two" class="right_close">
					<div class="bg_btn" @click="openRight"><p></p></div>
					<div class="bg_main">
						<span>时间</span>
						<el-date-picker v-model="startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">

						</el-date-picker>
						<span>至</span>
						<el-date-picker v-model="endTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">

						</el-date-picker>
					</div>
					<div type="primary"	v-loading.fullscreen.lock="fullscreenLoading" class="bg_click" @click="openHot">
						<span>绘制热点</span>
					</div>
				</div>
			</div>
			<!-- 提示框 -->
			<div v-show="hotPrompt" class="promptNull">
				<div class="hot_prompt">
					<h2>提示</h2>
					<div class="prompt_content">
						<span>{{tishiText}}</span>
						
						<button @click="closePrompt">确定</button>
					</div>
				</div>
			</div>
		</div>

		<script src="plugins/vue2.5.9.js"></script>
		<script src="plugins/axios.min.js"></script>
		<!-- <script src="plugins/ele2.3.3.js"></script> -->
		<script src="plugins/element-ui.js"></script>
		<script src="plugins/httpVueLoader.js"></script>
		<script src="plugins/jquery.min.js"></script>

		<script src="plugins/leaflet.js"></script>
		<script src="plugins/iclient9-leaflet.min.js"></script>
		<script src="plugins/leaflet.draw.js"></script>
		<script src="plugins/leaflet.measurecontrol.min.js"></script>
		<script src="plugins/leaflet.rotatedMarker.js"></script>

		<script src="plugins/leaflet-heat.js"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				// mixins: [mixin_common],
				data: {
					MainMap:null,
					tishiText:'请输入时间范围',
					fullscreenLoading:false,
					right_one:true,
					right_two:false,
					hotPrompt:false,
					startTime:"",
					endTime:"",
					userInfo: {
						userRightInfo:{
							userName:'heda'
						},
						pointsDecimal:"[29.618493015610223, 106.6510945558548]"
					},
					map:null,
					mapLayer:[],//地图路径
					nowTime: "",
					nowTimegang: "",
					input21: "",
					activeIndex: '1',

					settingData: { //设置-选项卡的数据
						showSettingbox :false,
						showSettingHotbox: false,
						activeNavtab: 'first', //设置弹窗切换的当前活跃项
						unit:"1",//单位转换
						settingval1: '',//标牌显示隐藏
						wakeOpacity:false,//尾迹显示隐藏
						settingval2: '',

						baseinfoval1: 0,
						baseinfoval2: 0,
						baseinfoval3: 0,
						options: [{
							value: '1',
							label: '1'
						}, {
							value: '5',
							label: '5'
						}, {
							value: '10',
							label: '10'
						}, {
							value: '20',
							label: '20'
						}, {
							value: '50',
							label: '50'
						}],
						mapoptions:[{
							value:'1',
							label:"地图样式1"
						},{
							value:'2',
							label:"地图样式2"
						}],
						mapvalue:'',
						value:''
					},
					value5: [],
					commonUrl: 'http://212.64.57.59:10008/', //加载 /map
					commonUrl2: 'http://212.64.57.59:10006/',//加载 /system
					commonUrl3:'http://212.64.57.59:10009/kyjs/',//加载后台管理系统
					// commonUrl: 'http://127.0.0.1:10008/', //加载 /map
					// commonUrl2: 'http://127.0.0.1:10006/',//加载 /system
					// commonUrl3:'http://127.0.0.1:10009/kyjs/',
					// commonUrl: 'http://dkjs.op-fly.cn/map/', //公共部分url
					// commonUrl2: 'http://dkjs.op-fly.cn/system/',
					// commonUrl3:'http://dkjs.system.op-fly.cn/',

					heatMapArr:[],
					heatMapLayer:null,
				},
				created: function() {
					var _this = this;
					
				},
				filters: {

				},

				mounted: function() {
					this.nowTimes();
					this.initMap();
					this.getUserInfo();
				},

				methods: {
					nowTimes() {
						// 系统时间
						var self = this;
						self.timeFormate(new Date());
						setInterval(function() {
							self.timeFormate(new Date())
						}, 1000);
					},
					timeFormate(timeStamp) {
						let year = new Date(timeStamp).getFullYear();
						let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
						let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
						let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
						let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
						let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
						this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ":" + ss;
						this.nowTimegang = year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
						this.executorDate = year + "-" + month + "-" + date;
					},
					handleSelect(key, keyPath) {
						// 头部导航按钮选择
						var self = this;
						if(key == 1) {
							self.settingData.showSettingbox = !self.settingData.showSettingbox;
						}
					},
					handleClick(tab, event) {
						//导航工具标题切换
					},
					setWake() {
						// 设置-基础设置-尾迹显示隐藏
						console.log(this.settingData.wakeOpacity);
					},
					setUnit(){
						// 设置-基础设置- 单位切换
						console.log(this.settingData.unit)
					},
					getUserInfo(){
						var _this = this;
						var StrA = localStorage.getItem('userInfo');
						
						
						if(StrA == null){
						    // window.location.href = _this.commonUrl3;   
						}else{
						    _this.userInfo = JSON.parse(StrA)
						     // 获取用户信息
						    if(_this.userInfo.pointsDecimal == null || _this.userInfo.pointsDecimal == ""){
						        _this.userInfo.pointsDecimal = "[29.618493015610223, 106.6510945558548]";
						    }
						}
					},
					goset() {
						// 跳转后台界面按钮
						window.open(_this.commonUrl3+"#/user");
					},
					initMap(){
						
						this.map = L.map('map', {
							
							crs:L.CRS.EPSG4326,
							preferCanvas: true,
							center: JSON.parse(this.userInfo.pointsDecimal.replace(/""/ig,"")),
							maxZoom: 18,
							zoom: 8,
							zoomControl: false,
							logoControl: true,
						});
						this.MainMap = L.supermap.tiledMapLayer('http://123.206.185.152:8090/iserver/services/map-new424/rest/maps/image').addTo(this.map);

					},
					openHot(){
						var _this = this;
						if(_this.startTime == "" || _this.endTime==""){
							_this.tishiText = "请输入时间范围";
							_this.hotPrompt = !_this.hotPrompt;
						}else{
							_this.fullscreenLoading = true;
							console.log(_this.startTime+"---"+_this.endTime)
							axios.post(_this.commonUrl + 'map/selectAll', {
								"startDate":_this.startTime,
								"endDate":_this.endTime
							}).then(function (res) {
								
								if (_this.heatMapArr.length > 0) {
									_this.heatMapArr = [];
								}
								if(_this.heatMapLayer != null){
									_this.heatMapLayer.remove();
									_this.heatMapLayer = null;
								}
								console.log(res.data.cat021Beans.length)
								if(res.data.cat021Beans.length>0){
									for(var i =0;i<res.data.cat021Beans.length;i++){
									let lat = res.data.cat021Beans[i].lat,
									log = res.data.cat021Beans[i].log;
									
									
									_this.heatMapArr.push([lat,log]);
									
									}
									_this.heatMapLayer = L.heatLayer(_this.heatMapArr, {
										radius: 30,
										minOpacity: 0.5
									}).addTo(_this.map);
									
									// _this.fullscreenLoading = false;
									console.log("加载完成");
								}else if(res.data.cat021Beans.length == 0){
									_this.tishiText = "数据为0";
									_this.hotPrompt = !_this.hotPrompt;
								}
								_this.fullscreenLoading = false;
								
							}).catch(function (err){
								console.log(err);
							})
						}
						
					},
					openRight(){
						this.right_one = !this.right_one;
						this.right_two = !this.right_two;
					},
					closePrompt(){
						this.hotPrompt = !this.hotPrompt;
					},
					closeMap(){
						//退出地图界面
						localStorage.removeItem('userInfo');
						// window.open("http://212.64.57.59:10009/kyjs/");
					},
					
				}
			});
		</script>

	</body>

</html>